<script setup>
defineProps({
  show: {
    type: Boolean,
    default: true,
  },
  // 是否开启定位
  isFixed: {
    type: Boolean,
    default: true,
  },
  // 模式选择-circle
  mode: {
    type: String,
    default: 'circle',
  },
  // 类型，排列方式，可取值：col、row
  type: {
    type: String,
    default: 'col',
  },
  // 背景颜色
  backgroundColor: {
    type: String,
    default: 'rgba(255, 255, 255, 0.8)',
  },
  // 提示文字
  text: {
    type: String,
    default: '',
  },
  // 文字颜色
  color: {
    type: String,
    default: '#666',
  },
  // 加载图标的大小，单位rpx
  iconSize: {
    type: [String, Number],
    default: 60,
  },
  // 加载图标颜色，只对 circle有效
  iconColor: {
    type: String,
    default: '#465cff',
  },
  // 提示文字的大小，单位rpx
  size: {
    type: [String, Number],
    default: 26,
  },
})
</script>

<template>
  <view
    class="ty-loading"
    :class="{
      fixed: isFixed,
      'u-flex': type === 'row',
      'u-flex-col': type === 'col',
      'ty-bg': backgroundColor,
    }"
    :style="{ backgroundColor: backgroundColor }"
    v-if="show"
  >
    <u-loading
      :mode="mode"
      :size="iconSize"
      :color="iconColor"
      :show="show"
    ></u-loading>
    <view
      class="text"
      :style="{ fontSize: `${size}rpx`, color: color }"
      v-if="text"
      >{{ text }}</view
    >
  </view>
</template>

<style lang="scss" scoped>
.ty-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  &.fixed {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
  }
  &.ty-bg {
    backdrop-filter: blur(10rpx);
  }
  &.u-flex-col {
    .text {
      margin-top: $ty-md-padding;
      color: $u-content-color;
    }
  }
  &.u-flex {
    .text {
      margin-left: $ty-md-padding;
    }
  }
}
</style>
